<template>
	<step-space
		:prev-disabled="!detailInfo.prevId"
		:next-disabled="!detailInfo.nextId"
		@prev="() => onRefresh(detailInfo.prevId)"
		@next="() => onRefresh(detailInfo.nextId)"
	/>

	<a-result v-if="result" status="404" title="404" sub-title="对不起，该客户已被领取、分配或删除。"> </a-result>
	<a-card v-if="loading">
		<div class="flex flex-row justify-between w-[100%]">
			<div class="flex-1">
				<div class="flex gap-4 mb-4">
					<!-- <a-image :width="80" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> -->
					<a-avatar shape="circle" :size="80">
						<template #icon><UserOutlined /></template>
					</a-avatar>
					<div class="py-2 flex flex-col justify-between">
						<div class="flex gap-3" style="margin-bottom: 20px">
							<span class="company-title">{{ detailInfo.customerName }}</span>
							<a-tag style="height: 24px; margin-right: 0">{{ followUpMap[detailInfo.followUpStatus] }}</a-tag>
							<a-tag style="height: 24px">{{ detailInfo.customerLevel }}类客户</a-tag>
						</div>
						<div class="flex gap-5">
							<span class="text-gray-500">
								<span>前跟进人</span>
								<span class="ml-[8px]">{{ detailInfo.lastFollowUserName || '-' }}</span>
							</span>
							<span class="text-gray-500">
								<span>最近跟进时间</span>
								<span class="ml-[8px]">{{ detailInfo.lastFollowTime || '-' }}</span>
							</span>
						</div>
						<div class="flex mt-[10px]">
							<span class="text-gray-500">
								<span>标签</span>
							</span>
							<span v-if="tagNameList.length" class="ml-[8px] mr-[30px]">
								<tag-list-space :list="tagNameList" :show-num="4" />
							</span>
							<el-space :size="2" class="ml-[10px] cursor-pointer">
								<el-icon size="20" color="#409eff">
									<el-icon-Edit />
								</el-icon>
								<el-text class="mx-1" type="primary" @click="onTagAdd">打标签</el-text>
							</el-space>
						</div>
					</div>
				</div>
				<a-space :size="4">
					<a-button v-if="hasPerm('bizPoolDetailEdit')" @click="editCustomerVisible = true" class="action-button"
						>编辑资料</a-button
					>
					<a-button v-if="hasPerm('bizPoolDetailReceive')" @click="onReceive" class="action-button">领取客户</a-button>
					<a-button v-if="hasPerm('bizPoolDetailAllocate')" @click="onAllocate" class="action-button"
						>分配客户</a-button
					>
					<a-button v-if="hasPerm('bizPoolDetailTransfer')" @click="onTransfer" class="action-button"
						>转移客户</a-button
					>
					<a-button v-if="hasPerm('bizPoolDetailDelete')" @click="onDelete" class="action-button">删除客户</a-button>
				</a-space>
			</div>
			<div class="max-w-[400px] min-w-[220px]">
				<contact-list-section
					ref="contactListSectionRef"
					:detail-info="{ ...detailInfo, tagIdList, tagNameList }"
					:type="type"
				/>
			</div>
		</div>
	</a-card>
	<!-- tab切换展示区域 -->
	<a-card v-if="loading" class="mt-[20px]">
		<customer-tab
			ref="customerListTab"
			:info="detailInfo"
			type="HighSea"
			:getRecord="customerApi.getRecordList"
			:getPersonList="customerApi.getPersonList"
		>
			<template #info>
				<a-col :span="12">
					<a-form-item label="客户状态">{{ detailInfo.customerStatus }}</a-form-item>
				</a-col>
			</template>
		</customer-tab>
	</a-card>
	<!-- 编辑资料 -->
	<customer-modal
		v-if="editCustomerVisible"
		type="edit"
		:info="detailInfo"
		v-model:visible="editCustomerVisible"
		:callBack="editCallBack"
		@finished="done"
	/>
	<!-- 分配客户 -->
	<allocate-modal ref="allocateFormRef" :high-seas-id="detailInfo.highSeasId" @successful="onAllocateSuccess" />
	<!-- 转移客户 -->
	<transfer-modal ref="transferFormRef" @successful="onTransferSuccess" />
	<!-- 删除客户 -->
	<delete-modal ref="deleteFormRef" @successful="onDeleteSuccess" />
</template>
<script setup>
	import customerModal from '../customerManagement/customerModal.vue'
	import customerTab from '../customerManagement/customerTab.vue'
	import allocateModal from './modal/allocateModal.vue'
	import transferModal from './modal/transferModal.vue'
	import deleteModal from './modal/deleteModal.vue'
	import customerApi from '@/api/biz/customerApi'
	import { useRoute, useRouter } from 'vue-router'
	import highSeasApi from '@/api/biz/highSeasApi'
	import useTabs from '@/utils/useTabs.js'
	import { followUpMap } from '../contractManagement/enum/contractEnum'
	import contactListSection from '@/components/modal/contactListSection.vue'
	import useTableFilter from '@/hook/useTableFilter'
	import StepSpace from '@/components/Space/StepSpace.vue'
	import { globalStore } from '@/store'

	const store = globalStore()

	const route = useRoute()
	const router = useRouter()
	const tableFilter = useTableFilter('highSeasFilter')
	const filterData = tableFilter.get() || {}

	const loading = ref(false)

	const type = ref(3) // 客户公海

	const detailInfo = reactive({
		id: null,
		highSeasId: '',
		prevId: null,
		nextId: null
	})

	onBeforeMount(() => {
		getData()
	})

	const result = ref(false)
	const getData = () => {
		const filterData = tableFilter.get() || {}
		highSeasApi.detail({ id: route.query.id, ...filterData }).then((data) => {
			if (data) {
				const { customerLevel, recordType, lastFollowUserName, realName, phone, ...other } = data
				Object.assign(detailInfo, {
					...other,
					customerLevel,
					recordType,
					lastFollowUserName,
					realName,
					phone,
					customerLevelName: customerLevel,
					receiveWay: recordType,
					followUpBefperson: lastFollowUserName,
					contactPerson: realName,
					contactPhone: phone
				})
				loading.value = true

				nextTick(() => {
					contactListSectionRef.value.getPersons(detailInfo.customerCode)
				})

				getTagList()
			} else {
				result.value = true
			}
		})
	}

	const tagIdList = ref([])
	const tagNameList = ref([])
	const getTagList = () => {
		customerApi
			.getTagList({
				customerCode: detailInfo.customerCode
			})
			.then((res) => {
				const { labelId, labelName } = res
				if (labelName) {
					tagIdList.value = labelId.split(',')
					tagNameList.value = labelName.split(',')
				} else {
					tagIdList.value = []
					tagNameList.value = []
				}
			})
	}

	const editCustomerVisible = ref(false)
	const customerListTab = ref(null)
	const editCallBack = ({ contactPerson, contactPhone, ...other }) =>
		highSeasApi.submitForm(
			{
				realName: contactPerson,
				phone: contactPhone,
				...other
			},
			true
		)
	const done = () => {
		getData()
		customerListTab.value.getRecords()
	}

	/**
	 * 领取客户
	 */
	const onReceive = () => {
		allocateFormRef.value.receiveAction([{ id: detailInfo.id }], () => {
			router.back()
		})
	}

	/**
	 * 分配客户
	 */
	const allocateFormRef = ref()
	const onAllocate = () => {
		allocateFormRef.value.onOpen([{ id: detailInfo.id }])
	}
	const onAllocateSuccess = () => {
		router.back()
	}

	/**
	 * 转移客户
	 */
	const transferFormRef = ref()
	const onTransfer = () => {
		transferFormRef.value.onOpen([{ id: detailInfo.id }])
	}
	const onTransferSuccess = () => {
		router.back()
	}

	/**
	 * 删除客户
	 */
	const deleteFormRef = ref()
	const onDelete = () => {
		deleteFormRef.value.onOpen([{ id: detailInfo.id }])
	}
	const onDeleteSuccess = () => {
		router.back()
	}

	/**
	 * 联系人列表拨打电话
	 */
	const contactListSectionRef = ref(null)

	/**
	 * 上一条/下一条
	 * @param id
	 */
	const onRefresh = (id) => {
		router.replace(`/biz/highSeas/detail?id=${id}`)
	}

	/**
	 * 打标签
	 */
	const onTagAdd = () => {
		store.tagShowTab = false
		store.tagNode?.open(detailInfo.customerCode, type.value, tagIdList.value)
	}

	const tagFinishStatus = computed(() => store.tagFinishStatus)
	watch(tagFinishStatus, (newVal, oldVal) => {
		if (newVal) {
			getTagList()
			customerListTab.value.getRecords()
		}
	})
</script>

<style lang="less" scoped>
	.company-title {
		font-size: 22px;
		font-weight: 500;
		color: #333333;
		line-height: 1;
	}

	.action-button {
		height: auto;
		margin-right: 12px;
		padding: 6px 24px;
		background: #ffffff;
		border: 1px solid #dadada;
		border-radius: 12px;
		& :deep(span) {
			font-weight: 500;
			font-size: 16px;
		}
	}
</style>
